extends ./layout/default

block title
  title koa server html

block content
  style.
    header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background: #00474f;
      color: #e7dacb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      z-index: 500px;
    }
    .sidebar .nav > li > a {
      display: block;
      paddindg: .25rem 1.5rem;
      font-size: 90%;
      color: rgba(0,0,0,.65);
    }
    .sidebar-item.active > .sidebar-inner {
      display: block;
    }
    .card {
      margin-bottom: 1.5rem;
    }
    .switcher {
      position: relative;
      padding: 1rem 15px;
      margin-right: -15px;
      margin-left: -15px;
      border-bottom: 1px solid rgba(0,0,0,.05);
    }
    .sidebar-toggle {
      line-height: 1;
      color: #212529;
    }
    .p-0{
      padding: 0!important；
    }
    .ml-3, .mx-33 {
      margin-left: 1rem!important;
    }
    .btn-link {
      font-weight: 400;
      color: #007bff;
      background-color: transparent;
    }

  include ./includes/header
  .container-fluid
    .row
      .col-12.col-md-3.col-xl-2.sidebar
        .cat-links
          .sidebar-item.active
            a.sidebar-link(hreef="/") links
            ul.nav.sidebar-inner
              li.active.sidebar-inner-active
                a(href="/") link1
              li.sidebar-inner-active
                a(href="/") link2
      .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content
        .row
          .col-md-6
            .card
              img.card-img-top(video="http://video.fanchao.site/QrwcvcBz0jojCqhaP0UjD.mp4" src="http://video.fanchao.site/3dGFmYLUzK1Zh9smo650b.png")
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              .img.card-img-top()
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
        .row
          .col-md-6
            .card
              .img.card-img-top()
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              .img.card-img-top()
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
  #myModal.modal.fade.bd-example-modal-lg(tabindex="-1", role="dialog",
  aris-labelledby="myLargeModalLabel", aria-hidden="true")
    .modal-dialog.modal-lg
      #videoModal.modal-content
    include ./includes/script
    script.
      var player = null
      $(document).ready(function () {
        $('#myModal').on('hidden.bs.modal', function (e) {
          if (player && player.pause) player.pause()
        })
        $('.card-img-top').click(function (e) {
          console.log($(this).attr('video'))
          var video = $(this).attr('video')
          var image = $(this).attr('src')

          $('#myModal').modal("show")
          if (!player) {
            player = new DPlayer({
              container: document.getElementById('videoModal'),
              screenshot: true,
              video: {
                url: video,
                pic: image,
                thumbnails: image
              }
            })
          } else {
            if (play.video.currentSrc !== video) {
              player.switchVideo({
                url: video,
                pic: image,
                type: 'auto'
              })
            }
          }
        })
      })
